import { t } from 'i18next'
import React, { useState } from 'react'
import { Modal } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import { CascadeSelect, Operate, Pending, Selected } from './blocks'
import { StyledWrap, StyledHelperWrap } from './style'
import { useSubmit } from './hooks'
import { IconHelper } from './components/Icons'
import { useMtAddStore } from './store'
import { useGlobalStore } from '@/store/global'

function Main() {
	const [helperShow, setHelperShow] = useState(false)
	const SWITCH = useGlobalStore((state) => state.SWITCH)
	const { isCascade, title, meetingType, isOpen, update } = useMtAddStore(
		(state) => ({
			isCascade: state.isCascade,
			title: state.title,
			meetingType: state.meetingType,
			isOpen: state.isOpen,
			update: state.update,
		}),
		shallow
	)
	const { onOk } = useSubmit()
	return (
		<>
			<Modal
				width={862}
				height={isCascade ? 673 : 623}
				open={isOpen}
				title={title}
				rightIcon={<IconHelper onClick={() => setHelperShow(true)} />}
				onCancel={() => {
					update({ isOpen: false })
				}}
				onOk={onOk}
				okText={t('确定')}
				cancelText={t('取消')}
			>
				<StyledWrap>
					<CascadeSelect />
					<div className="addmt-body">
						<Pending />
						<Operate />
						<Selected />
					</div>
				</StyledWrap>
			</Modal>
			<Modal
				width={402}
				height={358}
				open={helperShow}
				title={t('帮助')}
				onCancel={() => setHelperShow(false)}
				okText={false}
				cancelText={t('关闭')}
			>
				<StyledHelperWrap>
					{!!SWITCH.addMt.tip.phone && (
						<>
							<div>{t('1、输入电话号码')}</div>
							<div className="tab"> {t('分机前加 "." 符号 , 示例 : 02154072200.7429')}</div>
							<div className="tab"> {t('区号后无需加 "-" 符号 , 示例 : 02154072200')}</div>
						</>
					)}
					<div>
						{SWITCH.addMt.tip.phone ? 2 : 1}
						{t('、呼入注册外厂商mcu的终端')}
					</div>
					<div className="tab">{t('终端别名@ip , 示例 : 南京会议室@172.16.9.7')}</div>
					<div className="tab">{t('E.164号码@ip , 示例 : 0512121886364@178.6.97.6')}</div>
					<div className="tab">{t('E.164号码@ip:端口 , 示例 : 0512121886364@178.6.97.6:5060')}</div>
					<div>
						{SWITCH.addMt.tip.phone ? 3 : 2}
						{SWITCH.addMt.tip.email
							? t('、临时添加需输入准确的邮箱地址、{{name}} E.164号码', {
									name:
										meetingType === 2
											? ''
											: SWITCH.addMt.tip.phone
											? t('IP地址、电话号码、')
											: t('IP地址、'),
							  })
							: t('、临时添加需输入准确的{{name}} E.164号码', {
									name:
										meetingType === 2
											? ''
											: SWITCH.addMt.tip.phone
											? t('IP地址、电话号码、')
											: t('IP地址、'),
							  })}
					</div>
					<div className="tab">{t('外厂商终端请根据提示说明输入。')}</div>
				</StyledHelperWrap>
			</Modal>
		</>
	)
}
export default Main
